<template>
  <div>
      <div class="nav">
          <div class="content">
            <div class="wrapper">
              <div class="left">
                
                <a class="logo" href="https://www.jiakaobaodian.com/"></a>
              </div>
              <div class="right">
                <form action="https://www.so.com/s" target="_blank">
                  <input type="text" placeholder="请输入关键字">
                  <button>搜索</button>
                                
                </form>
              </div>
            </div>
            <div class="nav-main">
                <ul >
                  <li>
                    <a class="active" href="https://www.jiakaobaodian.com/">首页</a>
                    
                  </li>
                  <li @mouseenter="open" @mouseleave="close">
                    <a  href="https://www.jiakaobaodian.com/mnks/">模拟考试
                      <p class="el-icon-caret-bottom"></p>
                    </a>
                    <div ref="one" class="drop-w one" v-show="isShow" id="1">
                      <a href="https://www.jiakaobaodian.com/mnks/kemu1/car.html">科目一</a>
                      <a href="https://www.jiakaobaodian.com/mnks/kemu2/car.html">科目二</a>
                      <a href="https://www.jiakaobaodian.com/mnks/kemu3/car.html">科目三</a>
                      <a href="https://www.jiakaobaodian.com/mnks/kemu4/car.html">科目四</a>
                    </div>
                  </li>
                  <li  @mouseenter="open1" @mouseleave="close1">
                    <a  href="https://www.jiakaobaodian.com/school/">找驾校
                      <p class="el-icon-caret-bottom"></p>
                    </a>
                    <div class="drop-w" v-show="isShow1">
                      <a href="https://www.jiakaobaodian.com/school/">找驾校</a>
                      <a href="https://www.jiakaobaodian.com/coach/">找教练</a>
                      <a href="https://www.jiakaobaodian.com/peilian/">找陪练</a>
                    </div>
                  </li>
                  <li>
                    <a class="" href="https://www.jiakaobaodian.com/bbs/">驾考圈</a>
                  </li>
                  <li>
                    <a class="" href="https://www.jiakaobaodian.com/bbs/">交通标志</a>
                  </li>
                  <li>
                    <a class="" href="https://www.jiakaobaodian.com/bbs/">软件下载</a>
                  </li>
                  
                  <li style="width: 148px;">
                    <a class="" href="https://www.jiakaobaodian.com/bbs/">教考宝典企业版本</a>
                  </li>
                  <li>
                    <a class="" href="https://www.jiakaobaodian.com/bbs/">智慧驾校</a>
                  </li>
                  <li @mouseenter="open2" @mouseleave="close2">
                    <a href="https://www.maiche.com/rank/?from=jiakao_web">买新车
                      <p class="el-icon-caret-bottom"></p>
                    </a>
                    <div class="drop-w" v-show="isShow2">
                      <a href="https://www.maiche.com/rank/?from=jiakao_web" target="_blank" rel="nofollow">买车网</a>
                      <a href="http://www.pingxing.cn" target="_blank" rel="nofollow">平行之家</a>
                    </div>
                  </li>
                  <li>
                    <a class="" href="https://www.jiakaobaodian.com/bbs/">二手车</a>
                  </li>
                  
                </ul>
              
            </div>
          </div>
        </div>
  </div>
</template>

<script>
import select from '../components/select'
export default {
  data(){
    
    return {
      isShow: false,
      isShow1:false,
      isShow2:false,
      
    }
  },
  methods:{
    open(){
      this.isShow = !this.isShow
    },
    close(){
      this.isShow = !this.isShow
    },
    open1(){
      this.isShow1 = !this.isShow1
    },
    close1(){
      this.isShow1 = !this.isShow1
    },
    open2(){
      this.isShow2 = !this.isShow2
    },
    close2(){
      this.isShow2 = !this.isShow2
    },
  }
  
}
</script>

<style lang="scss">
.nav{
  .wrapper{
      display: flex;
      justify-content: space-between;
      height: 42px;
      overflow: hidden;
      margin: 28px auto;
     .left{
      width: 207px;
      height: 100%;
      font-size: 36px;
      overflow: hidden;
          .logo{
              display: block;
              width: 207px;
              height: 100%;
              overflow: hidden;
              vertical-align: middle;
              text-align: left;
              background: url(../assets/logo.png) no-repeat left center;
          }
     } 
     .right{
      display: flex;
      form{
          input{
              height: 42px;
              flex: 1;
              line-height: 40px;
              border: 1px solid #e9e9e9;
              font-size: 14px;
              padding: 0 40px 0 10px;
          }
            button{
              width: 55px;
              height: 42px;
              border: none;
            }  
        
      }
      
     }
  }
  .nav-main{
      width: 100%;
      background-color: #37B5F8;
      color: #fff;
      font-size: 16px;
      z-index: 1;
      ul{
          width: 1200px;
          margin: 0 auto;
          height: 50px;
          line-height: 50px;
          text-align: left;
          display: flex;
          // justify-content: space-between;
       li{
        display: flex;
        flex-wrap: wrap;
          padding: 0;
          vertical-align:  top;
          width: 108px;
          text-align: center;
           
          .drop-w{
            font-size: 14px;
            //display: none;
            position: absolute;
            top: 148px;
            width: 108px;
            background-color: #fff;
            z-index: 4;
            line-height: 40px;
            padding: 0 8px;
            color: #666;
            box-shadow: 0 0 20px rgba(0, 0, 0, .1);
            a{
              display: block;
              padding: 0;
              text-align: center;
              border-bottom: 1px solid #f6f6f6;
              &:hover {
                background-color: #fff;
                color: #54C0F9;
              }

            }
          }
          
          a{
            
              display: block;
              width: 100%;
              height: 100%;
              font-size: inherit;
              color: inherit;
              cursor: pointer;
             
              &:hover {
                background-color: #54C0F9;
                
            }
            &.active{
              background-color: #258FC7;
            }
            
            
           
          }
       }   
      }
  }
}
</style>